<!-- 收入合同 -->
<template>
    <div :style="{
        height: '100vh',

        position: 'relative',

    }">
        <a-card :bordered="false" class="mb-2">
            <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form">
                <a-row :gutter="24">
                    <a-col :span="6"> <a-form-item label="发票号码" name="number">
                            <a-input v-model="queryForm.number" :maxlength="12" />
                        </a-form-item>
                    </a-col> <a-col :span="6"> <a-form-item label="项目名称" name="projectName">
                            <a-input v-model="queryForm.projectName" />
                        </a-form-item>
                    </a-col> <a-col :span="6"> <a-form-item label="进项合同名称" name="contractName">
                            <a-input v-model="queryForm.contractName" />
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="供应商名称" name="supplier">
                            <a-input v-model="queryForm.supplier" />
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="发票类型" name="invoiceType">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model="queryForm.invoiceType" placeholder="请选择" :options="invoiceType">

                            </a-select>
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="回款方式" name="contractType">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model="queryForm.contractType" placeholder="请选择" :options="contractType">
                            </a-select>
                        </a-form-item>

                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="开票金额">
                            <a-row>
                                <a-col :span="12">
                                    <a-input-number name="invoicingAmountStart" v-model="queryForm.invoicingAmountStart"
                                        min="0" style="width: 100%;" placeholder="起始金额" />
                                </a-col>
                                <a-col :span="12">
                                    <a-input-number name="invoicingAmountEnd" v-model="queryForm.invoicingAmountEnd"
                                        min="0" style="width: 100%;" placeholder="结束金额" />
                                </a-col>
                            </a-row>
                        </a-form-item>

                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="登记人" name="createUserName">
                            <a-input v-model="queryForm.createUserName" />
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="所属部门" name="orgName">
                        <a-input v-model="queryForm.orgName" />
                        </a-form-item> </a-col>
                    <a-col :span="6">
                        <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                        <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                            {{ advanced ? '收起' : '展开' }}
                            <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                        </a>
                    </a-col>
                </a-row>
            </a-form> </a-card>
        <a-card :bordered="false">
            <s-table ref="tableRef" :data="loadData" bordered :row-key="(record) => record.id" :tool-config="toolConfig"
                :columns="columns" :scroll="{ x: 1000, }" class="mb-2">
                <template #operator class="table-operator">
                    <!-- <a-space>
                        <a-button type="primary" @click="showEdit()">
                            <template #icon>
                                <plus-outlined />
                            </template>
<span>新增</span>
</a-button>
</a-space> -->
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>
                    <!-- <template v-if="column.key === 'code'">
                        <a @click="showInfo(record)"> {{ record.code || "无" }}</a>
                    </template> -->
                    <template v-if="column.key === 'type'">
                        {{ invoiceType.find(x => x.value === record.type)?.label }}
                    </template>

                    <template v-if="column.key === 'control'">
                        <div>
                            <a @click="showInfo(record)">查看</a>
                            <!-- <a-divider type="vertical" />
                            <a-popconfirm title="确定删除此数据源？" @confirm="remove(record)">
                                <a-button type="link" danger size="small">删除</a-button>
                            </a-popconfirm> -->
                        </div>
                    </template>
                </template>
            </s-table>
        </a-card>

        <a-drawer title="收票记录" :width="1000" :visible="showAdd" :body-style="{ paddingBottom: '80px' }"
            placement="right" :get-container="false" :style="{ position: 'absolute'}" 
            :footer-style="{ textAlign: 'right' }" @close="onClose">
            <div>
                <edit ref="editRef" @onClose="onClose"></edit>
            </div>
            <template #footer>
                <a-button type="primary" @click="submit">保存</a-button>
                <a-button style="margin-left: 10px" @click="onClose">取消</a-button>
            </template>
        </a-drawer>

        <info ref="infoRef"></info>
    </div>
</template>

<script setup name="receivableMeetSale">
import { roles, invoiceType, contractType } from '@/utils/constants.js'
import api from '@/api/finance/ticketCollection/index'
import info from './components/ticketCollection/info.vue'
import edit from './components/ticketCollection/edit.vue'


const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 50,
        align: 'center',
    },
    {
        title: '发票编号',
        dataIndex: 'code',
        key: 'code',
        width: 120,
        align: 'center',
    },
    {
        title: '项目名称',
        dataIndex: 'proName',
        key: 'proName', width: 120,
        align: 'center',
    },
    {
        title: '进项合同名称',
        dataIndex: 'contractName',
        key: 'contractName', width: 120,
        align: 'center',
    },
    {
        title: "供应商名称",
        dataIndex: "supplier",
        key: "supplier", width: 120,
        align: 'center',
    },
    {
        title: '开票日期',
        dataIndex: 'invoiceTime',
        key: 'invoiceTime', width: 150,
        align: 'center',
    },
    {
        title: '发票类型',
        dataIndex: 'type',
        key: 'type', width: 120,
        align: 'center',
    },
    {
        title: '开票金额',
        dataIndex: 'amount',
        key: 'amount', width: 120,
        align: 'center',
    },
    {
        title: "登记人",
        dataIndex: "createUserName",
        key: "createUserName", width: 120,
        align: 'center',
    },
    {
        title: "所属部门",
        dataIndex: "department",
        key: "department",
        width: 180,
        align: 'center',
    },
    {
        title: "审核状态",
        dataIndex: "stateText",
        key: "stateText",
        width: 120,
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 120,
        align: 'center',
        fixed: 'right'
    },
];
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}
const reset = () => {
    queryForm.value = {}
}
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const tableRef = ref()
const editRef = ref()
const isEdit = ref(false)
const showFliter = ref(false)
const showAdd = ref(false)
const queryForm = ref({})
const infoRef = ref()
const showInfo = (record) => {
    infoRef.value.show(record)
}


const remove = (record) => {
    console.log("remove id", record)
    api.delete([{ id: record.id }]).then((res) => {
        tableRef.value.refresh(true)
    })
}

const onQuery = () => {
    tableRef.value.refresh(true)
}
const submit = () => {
    editRef.value.submit()
}
const onClose = (refresh) => {
    showAdd.value = false
    if (refresh) {
        tableRef.value.refresh(true)
    }
}

const loadData = (parameter) => {
    queryForm.value.current = parameter.current
    queryForm.value.size = parameter.size
    return api.page(queryForm.value).then((res) => {
        return res
    })

}

const showEdit = (record) => {
    editRef.value.show(record)
    showAdd.value = true
    if (record) {
        isEdit.value = true
    } else {
        isEdit.value = false
    }
}

</script>
<style scoped></style>
